<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :pagination="null"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 12 }"
      >
        <h3>账户信息</h3>
        <a-form-model-item label="用户名" prop="name">
          <a-input v-model="form.name" style="width: 500px" />
        </a-form-model-item>
        <a-form-model-item label="密码" prop="pwd">
          <a-input v-model="form.pwd" style="width: 500px" />
        </a-form-model-item>
        <a-form-model-item label="售后时间(天)" prop="sale_day">
          <!-- <a-input v-model="form.sale_day" style="width: 500px" /> -->
          <a-input-number v-model="form.sale_day" :precision="0"></a-input-number>
        </a-form-model-item>
        <h4 class="m-title">申请设置</h4>
        <a-form-model-item label="轮播图片" prop="cloud_apply_banner">
          <cyyUploadImg
            @uploadSuccess="
              (e) => {
                form.cloud_apply_banner.push(...e.data)
              }
            "
            @deleteImg="
              (e) => {
                form.cloud_apply_banner.splice(e.index, 1)
              }
            "
            :imgList.sync="form.cloud_apply_banner"
            imgSizeText="750px*280px"
            dataType="list"
          >
          </cyyUploadImg>
        </a-form-model-item>
        <!-- <a-form-model-item label="采购申请协议" prop="cloud_apply_agreement">
          <WangEditor
            :value="form.cloud_apply_agreement"
            @change="
              (e) => {
                form.cloud_apply_agreement = e
              }
            "
          ></WangEditor>
          <a-textarea :hidden="true" v-model="form.cloud_apply_agreement" />
        </a-form-model-item> -->
        <!-- <a-form-model-item label="供货商申请协议" prop="cloud_supplier_apply_agreement">
          <WangEditor
            :value="form.cloud_supplier_apply_agreement"
            @change="
              (e) => {
                form.cloud_supplier_apply_agreement = e
              }
            "
          ></WangEditor>
          <a-textarea :hidden="true" v-model="form.cloud_supplier_apply_agreement" />
        </a-form-model-item> -->
        <a-form-model-item
          label="表单设置"
          prop="list"
          align="center"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }"
        >
          <a-row style="margin-bottom: 24px">
            <a-col span="14" style="display: flex">
              <a-select v-model="addType">
                <a-select-option value="text"> 单行文本 </a-select-option>
                <a-select-option value="textarea"> 多行文本 </a-select-option>
                <a-select-option value="time"> 时间选择器 </a-select-option>
                <a-select-option value="date"> 日期选择器 </a-select-option>
                <a-select-option value="uploadImg"> 图片上传 </a-select-option>
              </a-select>
              <a-button type="primary" style="margin-left: 12px" @click="addList">添加</a-button>
            </a-col>
          </a-row>
          <div class="table">
            <div class="table-body">
              <a-row class="title self-th">
                <a-col :span="4" style="text-align: left"> 类型 </a-col>
                <a-col :span="4" style="text-align: left"> 名称 </a-col>
                <a-col :span="4" style="text-align: left"> 提示语 </a-col>
                <a-col :span="4" style="text-align: left"> 默认值 </a-col>
                <a-col :span="4" style="text-align: center"> 必填 </a-col>
                <a-col :span="4" style="text-align: left"> 位置 </a-col>
              </a-row>
              <div class="list" @dragover.prevent>
                <a-row
                  class="item tr-row"
                  v-for="(item, index) in form_list"
                  :key="index"
                  :draggable="true"
                  v-dragging="{
                    item: item,
                    list: form_list,
                    group: 'row',
                  }"
                >
                  <a-col :span="4" style="text-align: left">
                    {{ showType(item.type) }}
                  </a-col>
                  <a-col :span="4" style="text-align: left">
                    <a-input style="width: 80%" v-model="item.name"></a-input>
                  </a-col>
                  <a-col :span="4" style="text-align: left">
                    <a-input
                      style="width: 80%"
                      v-model="item.tip"
                      :placeholder="item.type == 'uploadImg' ? '请选择图片' : ''"
                      v-if="item.type == 'text' || item.type == 'textarea' || item.type == 'uploadImg'"
                    ></a-input>
                  </a-col>
                  <a-col :span="4" style="text-align: left">
                    <a-input
                      v-if="
                        item.type == 'text' ||
                        item.type == 'textarea' ||
                        item.type == 'radio' ||
                        item.type == 'checkbox'
                      "
                      v-model="item.default"
                    ></a-input>
                    <a-time-picker v-model="item.default" v-if="item.type == 'time'" valueFormat="HH:mm:ss" />
                    <a-date-picker v-model="item.default" v-if="item.type == 'date'" valueFormat="YYYY-MM-DD" />
                  </a-col>
                  <a-col :span="4" style="text-align: center">
                    <a-checkbox
                      :checked="item.required == 1 ? true : item.required == 0 ? false : ''"
                      @change="(e) => changeChecked(e, index)"
                    ></a-checkbox>
                  </a-col>
                  <a-col :span="4" style="text-align: left">
                    <a-button type="danger" size="small" @click="deleteItem(index)">删除</a-button>
                    <a-icon type="unordered-list" style="cursor: move; margin-left: 5px" />
                  </a-col>
                </a-row>
                <div v-if="form_list.length == 0" style="margin-top: 20px">
                  <a-empty />
                </div>
              </div>
            </div>
          </div>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 24 }">
          <a-divider style="margin: 0 0 40px 0" />
          <div style="display: flex; justify-content: center">
            <a-button :loading="btnLoading" type="primary" @click="onSubmit" style="margin-right: 8px"> 保存 </a-button>
            <a-button @click="$router.back()"> 取消 </a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
const columns = [
  {
    title: '表单类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' },
  },
  {
    title: '表单名称',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '表单提示语',
    scopedSlots: { customRender: 'tip' },
  },
  {
    title: '表单默认值',
    scopedSlots: { customRender: 'default' },
  },
  {
    title: '是否必填',
    scopedSlots: { customRender: 'required' },
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
  },
]
import { getCloudCustomForm, setCloudCustomForm } from '@/api/purchase/purchase'
import { cyyUploadImg } from '@/components/CyyUi'
import { WangEditor } from '@/components'
export default {
  components: {
    cyyUploadImg,
    WangEditor,
  },
  data() {
    return {
      addType: 'text',
      form_list: [],
      btnLoading: false,
      form: {
        cloud_apply_banner: [],
        cloud_apply_agreement: '',
        name: '',
        pwd: '',
        sale_day: 0,
        cloud_supplier_apply_agreement: '',
      },
      rules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        sale_day: [{ required: true, message: '请输入售后时间', trigger: 'blur' }],
      },
      content: '',
      columns,
    }
  },
  created() {
    getCloudCustomForm({}).then((res) => {
      if (res.code == 0) {
        this.form_list = res.data.list
        this.form.cloud_apply_banner = res.data.cloud_apply_banner
        this.form.cloud_apply_agreement = res.data.cloud_apply_agreement
        this.form.cloud_supplier_apply_agreement = res.data.cloud_supplier_apply_agreement
        this.content = res.data.cloud_apply_agreement
        this.form.name = res.data.content.name
        this.form.pwd = res.data.content.pwd
        this.form.sale_day = res.data.content.sale_day
      }
    })
  },
  methods: {
    showType(type) {
      switch (type) {
        case 'text':
          return '单行文本'
        case 'textarea':
          return '多行文本'
        case 'time':
          return '时间选择器'
        case 'date':
          return '日期选择器'
        case 'radio':
          return '单选'
        case 'checkbox':
          return '多选'
        case 'uploadImg':
          return '图片上传'
      }
      return ''
    },
    addList() {
      this.form_list.push({
        type: this.addType,
        name: '',
        tip: '',
        required: 0,
        default: '',
      })
    },
    deleteItem(index) {
      this.form_list.splice(index, 1)
    },
    changeChecked(e, index) {
      const checked = e.target.checked ? 1 : 0
      this.form_list[index].required = checked
    },
    onSubmit() {
      if (this.form_list.length == 0) {
        this.$message.warning('请增加表单数据')
        return
      }
      this.btnLoading = true
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          setCloudCustomForm({ list: this.form_list, ...this.form })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.error(res.msg)
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        } else {
          return false
        }
      })
    },
    // 改变必填
    changeRequired(e, scope) {
      console.log(e, scope)
      if (e) {
        scope.required = 1
      } else {
        scope.required = 0
      }
    },
  },
  filters: {
    typeText(val) {
      switch (val) {
        case 'text':
          return '单行文本'
        case 'textarea':
          return '多行文本'
        case 'time':
          return '时间选择器'
        case 'date':
          return '日期选择器'
        case 'radio':
          return '单选'
        case 'checkbox':
          return '多选'
        case 'uploadImg':
          return '图片上传'
      }
      return ''
    },
  },
}
</script>

<style scoped lang="less">
.btn {
  padding-top: 30px;
  text-align: center;
}
.table {
  width: 100%;
  margin-top: 10px;
  .table-body {
    .ant-row {
      min-height: 54px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
    }
    .self-th {
      background: #fafafa;
    }
  }
  .title {
    .ant-col {
      text-align: center;
      padding: 0 10px;
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
.add {
  display: inline-block;
  position: relative;
  margin-top: 20px;
  .add-action {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    /* height: 29px; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    border-left: 0;
  }
}
.warning {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 10px;
}

::v-deep {
  .ant-calendar-picker,
  .ant-time-picker {
    width: 100%;
    max-width: 100%;
  }
}

.m-title {
  font-size: 16px;
  color: #000;
}
</style>
